<template>
  <h2 v-loading="childrenItem.mask"
      element-loading-text="加载中..."
      element-loading-custom-class="loading-icon"
      class="tw-rounded-[6px] tw-px-16 click tw-bg-[#F5F5F5] tw-h-66 flex-middle border-box tw-mb-20 flex-between-center hover:tw-bg-[#f1f1f1]"
      @click="openMenu(childrenItem)">
    <span class="font-l tw-text-[#171920]" style="font-weight: 500;">{{ childrenItem.name }}</span>
    <div class="count flex-center">
      <span class="tw-mr-10">{{ isQuestion?childrenItem.exerciseProgress: childrenItem.listenProgress }}</span>
      <el-icon :class="childrenItem.isShow?'tw-rotate-180 ':''" color="#999999" size="20">
        <ArrowDown/>
      </el-icon>
    </div>
  </h2>
  <template v-if="childrenItem.children&&childrenItem.isShow">
    <div v-for="(items,indexs) in childrenItem.children" :key="indexs">
      <div v-if="items.categoryFlag==0">
        <curriculumItem :childrenItem="items" :courseRightBtn="courseRightBtn" :isQuestion="isQuestion"
    :class="indexs==childrenItem.children.length-1?'tw-mb-20':''"  :index="indexs+1"   :isCourseTable="isCourseTable" @goQuestion="goQuestion"
                        @goStudyVideo="goStudyVideos"></curriculumItem> </div>
      <div v-else>
        <course-curriculum-menu :childrenItem="items" :courseRightBtn="courseRightBtn" :isQuestion="isQuestion" @goStudyVideo="goStudyVideos"></course-curriculum-menu>
      </div>
    </div>
  </template>

</template>

<script setup>
import CurriculumItem from "@/views/component/course-curriculum-item.vue";
import {ArrowDown} from '@element-plus/icons-vue'
import {structureDetail} from "@/api/study.js";
import {ElMessage} from "element-plus";

let props = defineProps({
  childrenItem: {
    type: Object
    , default: {}
  },
  isQuestion: {
    type: Boolean,
    default: false
  },
  courseRightBtn: {//右侧按钮是否显示 不显示：false 显示： true
    type: Boolean,
    default: true
  },
  isCourseTable: {
    type: Boolean,
    default: false
  },
  getData: {
    type: Object,
    default: 0
  },
    type: {
    type: Number,
    default: 0
  },
})
let emit = defineEmits(['goStudyVideo', 'goQuestion'])
const goStudyVideos = (item) => {
  emit('goStudyVideo', item)
}
const goQuestion = (item) => {
  emit('goQuestion', item)
}
const openMenu = (item) => {
  if (props.childrenItem.isShow) {
    props.childrenItem.isShow = false

  } else {
    props.childrenItem.mask=true
    if (props.childrenItem.children) {
      props.childrenItem.isShow = true
      props.childrenItem.mask=false
      return
    }
    console.log(props.type)
    if( props.type==1) return props.childrenItem.mask = false;
    let allData = {
      orderItemId: props.getData.orderItemId,
      courseId: props.getData.courseId,
      structId: item.id,
      sourceType: props.getData.sourceType,
    }
    structureDetail(allData, (res) => {
      props.childrenItem.children = res.data.children

      if (res.data.children) {
        props.childrenItem.isShow = true
      }else{
        ElMessage({
          message: '暂无课程',
          type: 'warning',
        })
      }
      props.childrenItem.mask = false
    })
  }

}

</script>

<style lang='scss' scoped>
.count{
  font-size: 14px;
  font-weight: 400;
  color: #666;
}
.loading-icon {
  font-size: 20px;
}



::v-deep .el-loading-text {
  font-size: 24px;
  margin-top: -6px;
}
::v-deep .circular {
  height: 15px !important;
  width:15px !important;
}
</style>

